<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/framework/jsp/common/common.jsp"%>
<html>   
  <head>   
    <title>formvalidator.html</title>   
       
    <link rel="stylesheet" href="framework/js/jquery/jquery-plugin/css/jquery.validationEngine/template.css" type="text/css"></link> 
    <link rel="stylesheet" href="framework/js/jquery/jquery-plugin/css/jquery.validationEngine/validationEngine.jquery.css" type="text/css"></link>
    <script type="text/javascript" src="framework/js/jquery/jquery-1.8.3.js"></script> 
    <script type="text/javascript" src="framework/js/jquery/jquery-plugin/js/jquery.validationEngine/languages/jquery.validationEngine-zh_CN.js"></script>
    <script type="text/javascript" src="framework/js/jquery/jquery-plugin/js/jquery.validationEngine/jquery.validationEngine.js"></script> 
  
  
<script>     
        $(document).ready(function() {   
            $("#formID").validationEngine({   
                validationEventTriggers:"blur",  //触发的事件  validationEventTriggers:"keyup blur",   
                inlineValidation: true,//是否即时验证，false为提交表单时验证,默认true   
                success :  false,//为true时即使有不符合的也提交表单,false表示只有全部通过验证了才能提交表单,默认false   
                promptPosition: "topRight",//提示所在的位置，topLeft, topRight, bottomLeft,  centerRight, bottomRight   
                //failure : function() { alert("验证失败，请检查。");  }//验证失败时调用的函数   
                //success : function() { callSuccessFunction() },//验证通过时调用的函数   
             });   
        });   
    </script>    
  </head>   
     
  <body>   
    <form id="formID" class="formular" method="post" action="">   
            <fieldset>   
                <legend>User informations</legend>   
                <label>   
                    <span>Desired username (ajax validation, only karnius is available) : </span>   
                    <input value="" class="validate[required,custom[onlyLetterNumber],length[0,20]]" type="text" name="user" id="user" />//ajax验证用户名的地方   
                </label>   
                <label>   
                    <span>First name (optional)</span>   
                    <input value="karnius"  class="validate[optional,custom[onlyLetter],length[0,100]] text-input" type="text" name="firstname" id="firstname" />   
                </label>   
                <label>   
                    <span>Last name : </span>   
                    <input value="karnius"  class="validate[required,custom[onlyLetter],length[0,100]] text-input" type="text" id="data[Use6][preferedColor]" name="lastname"  />   
                </label>   
                <div>   
                    <span>Radio Groupe : <br /></span>   
                    <span>radio 1: </span>   
                    <input class="validate[required] radio" type="radio" name="data[User][preferedColor]"  id="radio1"  value="5">   
                    <span>radio 2: </span>   
                    <input class="validate[required] radio" type="radio" name="data[User][preferedColor]"  id="radio2"  value="3"/>   
                    <span>radio 3: </span>   
                    <input class="validate[required] radio" type="radio" name="data[User][preferedColor]"  id="radio3"  value="9"/>   
                </div>   
                <div>   
                    <span>Minimum 2 checkbox : <br /></span>   
                   
                    <input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox"  name="data[User3][preferedColor]" id="data[User3][preferedColor]" value="5">   
                    <input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox"  name="data[User3][preferedColor]" id="data[User3][preferedColor]" value="5">   
                       
                    <input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="maxcheck2"  value="3"/>   
                   
                    <input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="maxcheck3"  value="9"/>   
                </div>   
                <label>   
                    <span>Date : (format YYYY-MM-DD)</span>   
                    <input value="1111-11-11"  class="validate[required,custom[date]] text-input" type="text" name="date"  id="date" />   
                </label>   
                <label>   
                    <span>Favorite sport 1:</span>   
                <select name="sport" id="sport"  class="validate[required]"  id="sport"  >   
                    <option value="">Choose a sport</option>   
                    <option value="option1">Tennis</option>   
                    <option value="option2">Football</option>   
                    <option value="option3">Golf</option>   
                </select>   
                </label>   
                <label>   
                    <span>Favorite sport 2:</span>   
                <select name="sport2" id="sport2" multiple class="validate[required]"  id="sport2"  >   
                    <option value="">Choose a sport</option>   
                    <option value="option1">Tennis</option>   
                    <option value="option2">Football</option>   
                    <option value="option3">Golf</option>   
                </select>   
                </label>   
                <label>   
                    <span>Age : </span>   
                    <input value="22"  class="validate[required,custom[onlyNumber],maxSize[2]] text-input" type="text" name="age"  id="age" />   
                </label>   
                       
                <label>   
                    <span>Telephone : </span>   
                    <input value="1111111"  class="validate[required,custom[telephone]] text-input" type="text" name="telephone"  id="telephone" />   
                </label>   
                <label>   
                    <span>mobilephone : </span>   
                    <input value="111111"  class="validate[required,custom[mobilephone]] text-input" type="text" name="telphone"  id="telphone" />   
                </label>   
                <label>   
                    <span>chinese : </span>   
                    <input value="asdf"  class="validate[required,custom[chinese]] text-input" type="text" name="chinese"  id="chinese" />   
                </label>   
                <label>   
                    <span>url : </span>   
                    <input value="url"  class="validate[required,custom[url]] text-input" type="text" name="url"  id="url" />   
                </label>   
                <label>   
                    <span>zipcode : </span>   
                    <input value="zipcode"  class="validate[required,custom[zipcode]] text-input" type="text" name="zipcode"  id="zipcode" />   
                </label>   
                <label>   
                    <span>ip : </span>   
                    <input value="ip"  class="validate[required,custom[ip]] text-input" type="text" name="ip"  id="ip" />   
                </label>   
                <label>   
                    <span>qq : </span>   
                    <input value="01234"  class="validate[required,custom[qq]] text-input" type="text" name="qq"  id="qq" />   
                </label>   
            </fieldset>   
            <fieldset>   
                <legend>Password</legend>   
                <label>   
                    <span>Password : </span>   
                    <input value="karnius"  class="validate[required,length[6,11]] text-input" type="password" name="password"  id="password" />   
                </label>   
                <label>   
                    <span>equals password : </span>   
                    <input value="karnius"  class="validate[required,equals[password]] text-input" type="password" name="password2"  id="password2" />   
                </label>   
            </fieldset>   
            <fieldset>   
                <legend>Email</legend>   
                <label>   
                    <span>Email address : </span>   
                    <input value="ced@hotmail.com"  class="validate[required,custom[email]] text-input" type="text" name="email" id="email"  />   
                </label>   
                <label>   
                    <span>equals email address : </span>   
                    <input value="ced@hotmail.com" class="validate[required,equals[email]] text-input" type="text" name="email2"  id="email2" />   
                </label>   
            </fieldset>   
            <fieldset>   
                <legend>Comments</legend>   
                <label>   
                    <span>Comments : </span>   
                    <textarea value="ced@hotmail.com" class="validate[required,length[6,300]] text-input" name="comments" id="comments" /> </textarea>   
                </label>   
  
            </fieldset>   
            <fieldset>   
                <legend>Conditions</legend>   
                <div class="infos">Checking this box indicates that you accept terms of use. If you do not accept these terms, do not use this website : </div>   
                <label>   
                    <span class="checkbox">I accept terms of use : </span>   
                    <input class="validate[required] checkbox" type="checkbox"  id="agree"  name="agree"/>   
                </label>   
            </fieldset>   
<input class="submit" type="submit" value="Validate & Send the form!"/>   
<hr/>   
</form>   
  </body>   
</html>  